 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>头盔检测系统-警报</title>
    <link rel="stylesheet" type="text/css" href="EasyUI/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="EasyUI/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="EasyUI/themes/color.css">
    <link rel="stylesheet" type="text/css" href="EasyUI/demo.css">
    <script type="text/javascript" src="EasyUI/jquery.min.js"></script>
    <script type="text/javascript" src="EasyUI/jquery.easyui.min.js"></script>
    <script src="helmet.js"></script>
</head>
<body class="easyui-layout" style="background: #00bbee;">
<div style="padding: 20px;">
    <div style="text-align: left; font-size: 12px;">欢迎 <span id="userNameForWelcome">用户名</span> </div>
    <div id="select" data-options="region:'center',border:false" style="background: #00bbee; text-align: left; margin-top: 50px;">
        <label for="selectForm" style="font-size: 20px">选择摄像头：</label>
        <form id="selectForm" >
        <label for="province">省：</label>
        <select id="province" style="width: 150px " class="easyui-combobox"  data-options="
        url:'popedom/getProvinces',
        valueField:'id',
        textField:'name',
        onSelect:function(record){
            $('#city').combobox('reload','popedom/getCitiesByProvinceId?provinceId='+record.id);
        }">
         </select>
        <label for="city">市：</label>
        <select id="city" style="width: 150px " class="easyui-combobox" data-options="
        valueField:'id',
        textField:'name',
        onSelect:function(record){
            $('#district').combobox('reload','popedom/getDistrictsByCityId?cityId='+record.id);
        }">
         </select>
        <label for="district">区：</label>
        <select id="district" style="width: 150px " class="easyui-combobox" data-options="
        valueField:'id',
        textField:'name',
        onSelect:function(record){
            $('#block').combobox('reload','popedom/getBlocksByDistrictId?districtId='+record.id);
        }">
         </select>
        <label for="block">块：</label>
        <select id="block" style="width: 150px " class="easyui-combobox" data-options="
        valueField:'id',
        textField:'name',
        onSelect: function(){getCameras()}">
         </select>
        <label for="camera">已选摄像头：</label>
        <select id="camera" class="easyui-combobox"   multiple="true" multiline="true"
                style="width:150px;height:100px;" data-options="
                valueField:'id',
                textField:'id'">
        </select>
        <button id="confirm" type="button" style="width: 100px; margin-right: 20px; " onclick="onlineDetect()">接收警报</button>
    </form>
    </div>
    <div class="alert-settings">
        <h3>警报设置</h3>

        <div class="setting-group">
            <label for="alert-volume">铃声音量：</label>
            <input type="range" id="alert-volume" min="0" max="1" step="0.1" value="0.7">
            <span id="volume-value">70%</span>
        </div>

        <div class="setting-group">
            <label for="alert-vibration">启用振动：</label>
            <input type="checkbox" id="alert-vibration" checked>
        </div>

    </div>
</div>
<div id="print" data-options="region:'east',split:true,width:300" style="padding: 10px;">
    <form style="height: 80%; width: 100%">
        <label for="outputBox" >识别结果：</label>
        <textarea id="outputBox" style="height: 100%; width: 100%"></textarea>
    </form>
    <div style="text-align: right; position: absolute; bottom: 40px; right: 40px;">
        <button type="button" onclick="exitSystem()">退出系统</button>
    </div>
</div>

<script>
    //页面加载
    $(document).ready(function() {
        welcome().then(user => {
            if (user) {
                document.getElementById('userNameForWelcome').innerText = user.name;
                checkFunc(user.func);
                initCameraList(user);
                initWebSocket(user);//用于接收实时视频流的识别结果
                //initDefaultPopedom(user);
            }
            else
                exitSystem();
        });
    })

    //检查功能权限, 无权限则退出系统
    function checkFunc(func){
        if(func == 3){//分析员权限
            alert("分析员无此功能权限");
            window.location.href = 'login.html';
        }
    }
    //在输出框输出新的未戴头盔信息
    function setOutputBox(boxes, cameraId="-1"){
        let num = 0;//无头盔数
        boxes.forEach(box => {//计数
            if(box.l==="w"&&box.n===true){
                num++;
            }
        });
        if(num > 0) {
            //输出框显示: xx地xx摄像头发现x人未带头盔
            const outputBox = document.getElementById('outputBox');
            outputBox.value += "摄像头" + cameraId + "新发现 " + num + " 人无头盔\n";
            outputBox.scrollTop = outputBox.scrollHeight;  // 滚动到最底部
            //发出警报声音和振动
            triggerAlert();
        }
    }
    //打开页面后, 建立websocket连接, 用于接收摄像头实时识别结果
    function initWebSocket(user){
        //创建websocket连接
        const socket = new WebSocket('ws://localhost:8080/results-broadcast?userId=' + user.id);
        socket.onmessage = function (event) {
            // 解析 JSON 格式的消息
            const data = JSON.parse(event.data);
            const cameraId = Object.keys(data)[0]; // 获取第一个键（cameraId）
            const boxes = data[cameraId]; // 获取检测框列表
            // 处理接收到的广播数据
            if (Array.isArray(boxes)) {
                setOutputBox(boxes, cameraId);//输出
            } else {
                console.error('无效的消息格式:', data);
            }
        };

        socket.onerror = function (error) {
            console.error('WebSocket 错误:', error);
        };

        socket.onclose = function () {
            console.log('WebSocket 连接关闭');
        };

    }
    //提交在线检测请求(订阅摄像头, 摄像头实时检测)
    function onlineDetect(){
        //获取选中的摄像头列表
        const cameraList = $('#camera').combobox('getValues').map(Number); // 将字符串数组转换为数字数组
        //新建表单数据
        const formData = new FormData();
        // 检查摄像头列表是否为空
        if (cameraList.length > 0) {
            // 如果摄像头列表不为空，添加每个摄像头 ID
            cameraList.forEach((camera, index) => {
                formData.append('cameras', camera); // 将每个摄像头 ID 添加到表单数据中
            });
        } else {
            // 如果摄像头列表为空，可以添加一个空数组
            formData.append('cameras', []); //
        }
        //发起请求
        fetch('/camera/subscribe', {
            method: 'POST',
            body: formData // 发送表单数据
        })
            .then(response => response.json())
            .then(data => {
                if (! data.success) {
                    alert('订阅失败');
                }
            })
            .catch(error => console.error('Error:', error));
    }

    //警报设置
    // 获取DOM元素
    const volumeSlider = document.getElementById('alert-volume');
    const volumeValue = document.getElementById('volume-value');
    const vibrationCheckbox = document.getElementById('alert-vibration');
    const testButton = document.getElementById('test-alert');

    // 更新音量显示
    volumeSlider.addEventListener('input', function() {
        const volume = parseFloat(this.value);
        volumeValue.textContent = Math.round(volume * 100) + '%';
    });

    // 振动功能
    function vibrate() {
        if (!vibrationCheckbox.checked) {//用户设置不振动
            return;
        }

        // 检查浏览器是否支持振动API
        if (navigator.vibrate) {
            // 振动模式: 振动200ms, 暂停100ms, 振动200ms
            navigator.vibrate([200, 100, 200]);
        }
        else{
            console.log("浏览器不支持振动api")
        }
    }

    // 播放 提示音
    function playSystemSound() {
        try {
            // 创建隐藏的audio元素播放系统提示音
            const audio = new Audio();

            // 加载音频
            audio.src = '/audios/alarm.mp3';
            // 设置音量
            audio.volume = parseFloat(volumeSlider.value);

            audio.play().catch(e => {
                console.log( e);
             });
        } catch (e) {
            console.error('播放声音失败:', e);
        }
    }

    // 触发警报
    function triggerAlert() {
        // 播放系统提示音
        playSystemSound();

        // 触发振动
        vibrate();


    }

</script>
</body>
</html>